<template>
    <view>
        <cu-custom bgColor="bg-white" :isBack="true">
            <block slot="content">调整排班</block>
        </cu-custom>
        <view class="bg-white padding flex align-center">
            <text class="cuIcon-info text-grey"></text>
            <text class="text-xs text-bold text-grey margin-left-sm">左右滑动可选择月份</text>
        </view>
        <swiper class="swiper bg-white">
            <swiper-item>
                <view class="bg-white padding">
                    <view class="text-bold">本月</view>
                    <view class="list grid col-5 margin-top">
                        <view class="padding-xs" v-for="(item, index) in list.month" :key="item.day_time">
                            <view class="padding-sm radius-xl text-center"
                                :class="{ 'china-btn-bg': !item.disable && !item.scheduling, 'bg-scheduling': item.scheduling, 'bg-gray': item.disable }"
                                @tap="selected(item)">
                                {{ item.day }}
                                <view class="text-xs" v-if="item.scheduling">已排班</view>
                                <view class="text-xs" v-else>休息</view>
                            </view>
                        </view>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="bg-white padding">
                    <view class="text-bold">下一月</view>
                    <view class="list grid col-5 margin-top">
                        <view class="padding-xs" v-for="(item, index) in list.tomonth" :key="item.day_time">
                            <view class="padding-sm radius-xl text-center"
                                :class="{ 'china-btn-bg': !item.disable && !item.scheduling, 'bg-scheduling': item.scheduling, 'bg-gray': item.disable }"
                                @tap="selected(item)">
                                {{ item.day }}
                                <view class="text-xs" v-if="item.scheduling">已排班</view>
                                <view class="text-xs" v-else>休息</view>
                            </view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <view class="padding margin-top-lg" v-if="form.day">
            <view class="box padding-lg bg-white radius-xl">
                <view class="item crow margin-bottom-xl">
                    <view class="left text-left">上工日期</view>
                    <view class="right text-right">
                        <text class="text-bold">{{ form.day }}</text>
                    </view>
                </view>
                <view class="item crow margin-bottom-xl" @tap="startShow = true;">
                    <view class="left text-left">上班时间</view>
                    <view class="right text-right">
                        <text class="text-bold">{{ form.start }}</text>
                    </view>
                    <view class="cuIcon-right locationfill"></view>
                </view>
                <view class="item crow margin-bottom-xl" @tap="endShow = true;">
                    <view class="left text-left">收班时间</view>
                    <view class="right text-right">
                        <text class="text-bold">{{ form.end }}</text>
                    </view>
                    <view class="cuIcon-right locationfill"></view>
                </view>
                <view class="flex flex-direction">
                    <button class="cu-btn china-btn-bg lg round" @tap="submit">保存</button>
                </view>
            </view>
        </view>
        <uPicker :show="startShow" :columns="[start]" keyName="text"
            @pickerPopup="startTimePopup" />
        <uPicker :show="endShow" :columns="[end]" keyName="text" @pickerPopup="endTimePopup" />
        <loading v-if="pageLoading" />
    </view>
</template>
<script>
export default {
    data() {
        return {
            pageLoading: false,
            startShow: false,
            endShow: false,
            start: [],
            end: [],
            form: {
                day: '',
                start_time: '',
                end_time: '',
                start_date:'',
                end_date:'',
                start: '09:00',
                end: '18:00'
            },
            list: {}
        };
    },
    onLoad() {
        this.getData();
    },
    methods: {
        getData() {
            this.pageLoading = true;
            this.$utils.$api.TechnicianScheduling.adjustScheduling().then(data => {
                this.list = data;
            }).catch(() => { }).finally(() => {
                this.pageLoading = false;
            })
        },
        selected(item) {
            if (item.disable) { return; }
            let D = {
                day: item.day_time,
                start_time: item.day_time+' 09:00:00',
                end_time: item.day_time+' 18:00:00',
                start: '09:00',
                end: '18:00'
            }
            if (item.scheduling) {
                D.id=item.scheduling.id;
                D.start_time=item.scheduling.start_time;
                D.end_time=item.scheduling.end_time;
                const start_date=new Date(item.scheduling.start_time.replace(/-/g,'/'));
                const end_date=new Date(item.scheduling.end_time.replace(/-/g,'/'));
                D.start=`${start_date.getHours().toString().padStart(2, '0')}:${start_date.getMinutes().toString().padStart(2, '0')}`;
                D.end=`${end_date.getHours().toString().padStart(2, '0')}:${end_date.getMinutes().toString().padStart(2, '0')}`;
                D.start_date=start_date;
                D.end_date=end_date;
            }
            this.form = D;
            this.$nextTick(() => {
                this.start = this.get24hData(0, 23);
                this.end = this.get24hData(0, 23);
            })
        },
        get24hData(min, max) {
            let arr = [];
            for (let i = min; i <= max; i++) {
                const date = new Date(this.form.day + ' 00:00:00');
                date.setHours(i);
                date.setMinutes(0);
                arr.push({
                    text: i.toString().padStart(2, '0') + ':00',
                    date: date
                })
                date.setMinutes(30);
                arr.push({
                    text: i.toString().padStart(2, '0') + ':30',
                    date: date
                })
            }
            return arr
        },
        startTimePopup(e) {
            if (e.type === 'confirm') {
                this.form.start = e.data.text
                const date = e.data.date;
                this.form.start_date=date;
                this.form.start_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${e.data.text}:00`;
                if(this.form.start_date>this.form.end_date){
                    this.form.end_date='';
                    this.form.end_time='';
                    this.form.end='';
                }
                this.end=this.get24hData(date.getHours()+1,23);
            }
            this.startShow = false;
        },
        endTimePopup(e) {
            if (e.type === 'confirm') {
                this.form.end = e.data.text
                const date = e.data.date;
                this.form.end_date=date;
                this.form.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${e.data.text}:00`;
                if(this.form.start_date>this.form.end_date){
                    this.form.start_date='';
                    this.form.start_time='';
                    this.form.start='';
                }
                this.start=this.get24hData(0,date.getHours()-1);
            }
            this.endShow = false;
        },
        submit(){
            this.$utils.$api.TechnicianScheduling.update(this.form).then(res=>{
                this.form.id='';
                this.form.day='';
                this.getData();
            })
            .catch(err=>{
                this.$utils.$message.error(err.msg);
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.swiper {
    height: 540px;
}

.bg-scheduling {
    background-color: $u-error !important;
    color: #FFFFFF;
}

.box {
    .item {
        width: 100%;

        .left {
            width: 25%;
        }

        .right {
            width: 69%;

            input {
                font-size: 26upx;
            }
        }

        .locationfill {
            font-size: 35upx;
        }
    }
}
</style>